<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<div id="app">
	</div>
	<p><button onclick="destroy()">卸载</button></p>
	<p><button onclick="reload()">刷新</button></p>
	<p><button onclick="tick()">更改数据</button></p>
	<script type="text/javascript">
		var ch = Vue.extend({
			template:`<p>{{message}}</p>`,
			data(){
				return {
					message: "hello I'm 陈昊!"
				}
			},
			mounted: function(){
				console.log('mounted被创建')
			},
			destroyed: function(){
				console.log('destory销毁之后');
			},
			updated: function(){
				console.log('updated更新之后');
			}
		});

		var vm = new ch().$mount("#app");
		function destroy(){
			vm.$destroy();
		}
		function reload(){
			vm.$forceUpdate();
		}
		function tick(){
		    vm.message="update message info ";
		    vm.$nextTick(function(){
		        console.log('message更新完后我被调用了');
		    })
		}
	</script>
</body>
</html>